import React, { useContext, useState, useEffect, useRef } from 'react';
import {
  message,
  Drawer,
  Form,
  Input,
  Button,
  Radio,
  InputNumber,
  Table,
  Spin,
  Popconfirm,
  Select,
} from 'antd';
import {
  upadataField,
  getMappingByTableid,
  getSqlDetail,
  createStructurebybaseTable,
  savaFile,
} from '../api';
import { addField } from '../../../../CollectingData/Category/api';

const { Option } = Select;

const SetTime = props => {
  // 结构化数据
  const { visible, onCancel, onSuccess, data, type } = props;

  // 初始化 form
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 详情
  const getDetailData = () => {
    const paylaod = {
      id: data.id,
    };
    setLoading(true);

    getMappingByTableid(paylaod).then(res => {
      setLoading(false);
      if (res.code === 0) {
        setItemId(res.data.id);
        const structure = res.data.structures || [];
        setListData(structure);
        // form.setFieldsValue({ ...res.data, ...data })
      } else {
        message.error(res.msg || '获取详情失败');
      }
    });
  };

  useEffect(() => {
    getDetailData();
  }, []);

  // 栅格化
  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 14 },
  };

  /**
   * @en-US Update node
   * @zh-CN values
   *
   * @param fields
   */
  const updataData = values => {
    const hide = message.loading('正在添加');
    setLoading(true);

    const requirement = values.requirement ? ` where ${values.requirement}` : '';

    const paylaod = {};
    upadataField(paylaod).then(res => {
      hide();
      setLoading(false);
      if (res.code === 0) {
        onCancel(false);
        onSuccess();
      } else {
        message.error(res.msg || '修改失败，请重试');
      }
    });
  };
  const save = async () => {
    // try {
    //   const values = await form.validateFields();
    //   toggleEdit();
    //   handleSave({ ...record, ...values });
    // } catch (errInfo) {
    //   console.log('Save failed:', errInfo);
    // }
  };

  return (
    <Spin spinning={loading}>
      <Form {...formItemLayout} name="control-ref" form={form}>
        <Form.Item label="目标表名称" name="tableName" rules={[{ required: true }]}>
          <Input maxLength={20} placeholder="请输入目标表名称" />
        </Form.Item>

        <Form.Item name="tableState" label="激活状态">
          <Radio.Group>
            <Radio value="0">禁用</Radio>
            <Radio value="1">激活</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="备注" name="remarks">
          <Input.TextArea maxLength={200} allowClear placeholder="请输入备注 最多200字" />
        </Form.Item>
      </Form>
      <Button type="primary" danger onClick={save} style={{ marginLeft: 20 }}>
        保存
      </Button>
    </Spin>
  );
};

export default SetTime;
